<template>
  <div class="flex items-center justify-center">
    <div class="login-box flex w-full sm:w-[32rem] shadow bg-white lg:rounded-lg">
      <!--<div class="w-1/2 hidden sm:block">
              <img src="@/assets/login-left.png" />
            </div>-->
      <div class="w-full mx-auto pt-6 pb-6 pl-4 pr-4">
        <div class="flex mt-2">
          <img :src="logo" class="mx-auto w-8" />
        </div>
        <div class="w-full text-center text-2xl mt-6 mb-8 text-indigo-700">
          Hi, 👏欢迎登录站点
        </div>
<!--        <el-divider>登录</el-divider>-->
        <div>
          <el-form
            ref="form"
            :model="params"
            status-icon
            v-loading.fullscreen.lock="loading"
            :rules="rules"
            element-loading-background="rgba(0, 0, 0, 0.7)"
            label-width="70px"
            class="w-11/12 sm:w-4/5 pt-2 space-y-8 mx-auto"
          >
            <el-form-item prop="email">
              <el-input
                v-model="params.username"
                type="email"
                autocomplete="off"
                placeholder="请输入账号"
                size="large"
                class="h-12 text-base"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="params.password"
                type="password"
                autocomplete="off"
                size="large"
                placeholder="请输入密码"
                show-password
                class="h-12 text-base"
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="flex justify-between w-11/12 sm:w-4/5 mx-auto mt-3">
          <el-checkbox v-model="params.remember" class="top-2">
            记住我
          </el-checkbox>
          <div class="text-sm pt-3 text-indigo-600 cursor-pointer">
            忘记密码
          </div>
        </div>
        <div class="w-11/12 sm:w-4/5 mx-auto mt-5">
          <el-button
            type="primary"
            @click="submit(form)"
            size="large"
            class="w-full"
          >
            登录
          </el-button>
        </div>

        <div class="w-full text-center text-sm text-gray-400 mt-8 mb-10">
          FanAdmin @copyright 2018-{{ new Date().getFullYear() }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import logo from '@/core/assets/images/logo/logo.png'
// 引入styles
import '@/core/styles/site-as-admin/index.scss'
import { ElMessage, FormInstance } from 'element-plus'
import { getInitConfig, login } from '@/core/api/auth/index'
import { initDynamicRouter } from '@/core/router/modules/dynamicRouter'

import useTabsStore from '@/core/store/modules/tabs.ts'
import useUserStore from '@/core/store/modules/user.ts'
import userUserInfoStore from '@/core/store/modules/userInfo.ts'
import useConfigStore from '@/core/store/modules/config.ts'
import { useRouter } from 'vue-router'

const userStore = useUserStore()
const userInfoStore = userUserInfoStore()
const router = useRouter()
const tabsStore = useTabsStore()
const configStore = useConfigStore()

// 获取配置
const getConfig = async () => {
  try {
    const res = await getInitConfig()
    configStore.setConfig(res.data)
  } catch (e) {}
}
getConfig()

const params = reactive({
  username: 'admin',
  password: '123456',
  remember: false,
})

const loading = ref(false)

const rules = reactive({
  username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
})

const form = ref<FormInstance>()

const submit = async (loginForm: FormInstance | undefined) => {
  if (!loginForm) return

  try {
    // 1、执行登录接口
    const res = await login(params)
    // console.log("tokenValue", res.data.tokenValue);
    // userStore.setToken(res.data.tokenValue);

    userStore.setToken(res.data.token)

    userInfoStore.setUserInfo(res.data.admin)

    // 2、添加动态路由 AND 用户按钮 AND 角色信息 AND 用户个人信息
    await initDynamicRouter()
    // 3、清空 tabs数据、keepAlive缓存数据
    tabsStore.setTab([])
    // console.log(666, 999)
    // keepAliveStore.setKeepAliveName([]);

    // 4、跳转到首页
    ElMessage('登录成功🌻')
    setTimeout(() => {
      loading.value = false
      router.push('/site/welcome')
    }, 1500)

    // 等待1秒关闭loading
    // let loadingTime = 1;
    // setInterval(() => {
    //   loadingTime--;
    //   if (loadingTime === 0) {
    //     noticeSuccess("登录成功🌻");
    //     // Token过期，跳转到上次记录的页面
    //     const redirectPath = route.query.redirect as string | undefined;
    //     loading.value = false;
    //     router.push(redirectPath || "/home");
    //   }
    // }, 1000);
    // }
  } catch (error) {
    setInterval(() => {
      loading.value = false
    }, 1000)
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-form-item__content) {
  margin-left: 0 !important;
}

:deep(.el-divider__text) {
  @apply text-xl text-slate-400;
}
.login-box {
  margin-top: 5%;
}
.bg-white {
  background-color: var(--el-menu-bg-color);
}
</style>
